<!--
  会诊诊断
  sy
  2020年2月26日
-->
<template lang="pug">
  el-container
    el-header.header
      title-bg
    el-container
      el-aside.nav-layout(width="258px")
        nav-menu
      el-main.main-live
        main-content(modularTitle="会诊诊断")
        div.main-content-box
          p.main-content-title Consultation Diagnosis
          el-row(:gutter="28")
            el-col(:span="12")
              el-card
                div(slot="header").card-title 已会诊列表
                el-table(:data="tableData" @row-click="getDetails" style="height:192px")
                  el-table-column(type="index" label="序号" align="center")
                  el-table-column(label="患者姓名" prop="name" align="center" width="80")
                  el-table-column(label="性别" prop="sex" align="center" width="80")
                  el-table-column(label="申请医师" prop="doctor" align="center" width="80")
                  el-table-column(label="原切片单位" prop="hospitalName" align="center")
                  el-table-column(label="切片类型" prop="className" align="center" width="80")
                div.dingwei
                  el-pagination(
                  layout="prev, pager, next"
                  :total="total"
                  @current-change="handleCurrentChange").paging
              el-card
                div(slot="header").card-title 患者信息
                div.form-box(ref="form")
                  el-form(:model="formModel" label-width="130px" size="medium")
                    el-form-item.w-33(label="患者姓名：")
                      el-input(v-model="formModel.name" disabled)
                    el-form-item.w-33(label="年龄：")
                      el-input(v-model="formModel.age" disabled)
                    el-form-item.w-33(label="性别：")
                      el-input(v-model="formModel.sex" disabled)
                    el-form-item.w-33(label="申请医师：")
                      el-input(v-model="formModel.doctor" disabled)
                    el-form-item.w-33(label="切片类型：")
                      el-input(v-model="formModel.className" disabled)
                    el-form-item.w-33(label="病理号：")
                      el-input(v-model="formModel.pathologyNum" oninput="value=value.replace(/[^\d]/g,'')" disabled)
                    el-form-item.w-50(label="原切片单位：")
                      el-input(v-model="formModel.hospitalName" disabled)
                    el-form-item.w-50(label="申请时间：")
                      el-input(v-model="formModel.date" disabled)
                    el-form-item(label="临床诊断：")
                      el-input(v-model="formModel.diagnosis" disabled)
                    el-form-item(label="肉眼及手术所见：")
                      el-input(v-model="formModel.diagnosisDetail" type="textarea" resize="none" disabled :rows="3")
            el-col(:span="12")
              el-card.form-card
                div(slot="header").card-title 会诊诊断
                  div.card-record(ref="record")
                    div.card-modification(@click="modifier" ref="modDiag") 修改诊断
                div(ref="form")
                  el-form(:model="formModelDiagnosis" label-width="120px" size="medium")
                    el-form-item(label="会诊专家：")
                      el-input(v-model="formModelDiagnosis.expertName" disabled)
                    el-form-item(label="会诊时间：")
                      el-input(v-model="formModelDiagnosis.date" disabled)
                    el-form-item(label="会诊号：")
                      el-input(v-model="formModelDiagnosis.number" v-bind:disabled="groupMark" oninput="value=value.replace(/^\d+\w+$/,'')")
                    el-form-item(label="会诊意见：")
                      el-input(v-model="formModelDiagnosis.opinion" v-bind:disabled="groupOpin" type="textarea" maxlength="270" resize="none" :rows="10")
                    el-form-item(label="光镜所见：")
                      div(v-if="fileArr.length > 0").imgHeight
                        img(v-for="item in fileArr" :src="item" width="148" height="148")
                      kalix-clansman-upload(v-else ref="upload" :file-list="fileArr" :action="action" :on-success="uploadYes"  :limit="limit" :on-progress="progress" v-on:filePath="getFilePath" fileType="img" tipText="只能上传jpg/png文件")
                  div.saveData(@click="saveData" ref="amend") 提交诊断
                  div.saveData.amendSubmit(v-if="this.identity[0].identity === '管理专家'" @click="glModifierSub" ref="amendSub") 修改诊断
                  div.saveData.amendSubmit(v-else @click="modifierSub" ref="amendSub") 修改诊断
</template>

<script>
  import TitleBg from '../../components/TitleBg'
  import NavMenu from '../../components/NavMenu'
  import MainContent from '../../components/MainContent'
  import KalixClansmanUpload from '../../components/fileUpload/upload'
  // import baseURL from '../../config/global.toml'
  import Message from '../../common/message'

  export default {
    components: {
      MainContent,
      NavMenu,
      TitleBg,
      KalixClansmanUpload
    },
    name: 'diagnose',
    data() {
      return {
        fullHeight: document.documentElement.clientHeight, // 屏幕可视区域高度
        tableData: [], // 已会诊列表
        tableHeight: null, // 表格高度——随屏幕高度实时变化
        total: 100, // 分页所需患者总数
        pageSize: 3, // 分页每页显示患者条数
        currentPage: 1, // 当前分页页数,
        formModel: {}, // 患者信息表单数据
        formModelDiagnosis: { // 会诊诊断表格显示
          name: '',
          id: '',
          date: '',
          number: '',
          opinion: ''
        }, // 会诊诊断表单数据
        dialogImageUrl: '',
        dialogVisible: false,
        presentDate: '', // 当前年份
        action: 'https://xsdmkj.cn:8443' + '/camel/rest/upload', // 图片上传路径
        // action: baseURL.baseURL + '/camel/rest/upload', // 图片上传路径
        filePathArr: [],
        img: '',
        groupMark: false,
        groupOpin: false,
        fileArr: [],
        fileUrl: '',
        filePath: '',
        fileName: '',
        limit: 4,
        uploadShow: false
      }
    },
    watch: {
      // 监听屏幕可视区域高度变化
      fullHeight(val) {
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          // 一旦监听到的fullHeight值改变，就将其重新赋给data里的fullHeight
          this.fullHeight = val
          this.timer = true
          let that = this
          setTimeout(function () {
            that.timer = false
          }, 400)
        }
      }
    },
    created() {
      // 身份判断
      this.identity = JSON.parse(this.$KalixCatch.get('personaltwo'))
    },
    mounted() {
      const that = this
      // 窗口变化重新计算高度
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
          that.$nextTick(() => {
            that.tableHeight = that.fullHeight - 278 - 80 // 患者列表表格高度
            that.$refs.form.style.height = that.fullHeight - 278 - 33 + 'px' // 患者详情表单高度
          })
        })()
      }
      this.$nextTick(() => {
        that.tableHeight = that.fullHeight - 278 - 80 // 患者列表表格高度
        that.$refs.form.style.height = that.fullHeight - 278 - 33 + 'px'// 患者详情表单高度
      })
      let time = new Date()
      this.presentDate = time.getFullYear()
      if (this.identity[0].identity === '管理专家') {
        this.getReport()
      } else {
        this.getReportTwo()
      }
    },
    methods: {
      progress(event, file, fileList) {
      },
      uploadYes(response, file, fileList) {
      },
      getFilePath(filePath, fileName) { // 图片
        this.filePath = filePath
        this.fileName = fileName
        this.filePathArr.push(filePath)
      },
      saveData() { // 提交档案
        let number = this.formModelDiagnosis.number
        let opinion = this.formModelDiagnosis.opinion
        let filePathArr = this.filePathArr
        let filePath = ''
        if (this.filePathArr.length) {
          this.filePathArr.forEach(e => {
            filePath += e + ','
          })
          filePath = filePath.substr(0, filePath.length - 1)
        }
        this.fileUrl = filePath
        if ((number === '' || number === undefined || number === null) || (opinion === '' || opinion === undefined || opinion === null) || (filePathArr === '' || filePathArr === undefined || filePathArr === null)) {
          Message.warning('数据不能为空')
        } else {
          if (this.filePath && this.fileName) {
            this.axios.request({
              method: 'PUT',
              url: '/camel/rest/telemedicine/reports/' + this.formModelDiagnosis.id + '/updateReport',
              params: {
                id: this.formModelDiagnosis.id,
                fid: this.formModelDiagnosis.fid,
                number: this.formModelDiagnosis.number,
                picture: this.fileUrl,
                opinion: this.formModelDiagnosis.opinion,
                statusOn: false
              }
            }).then((res) => {
              if (res.data.success === true) {
                Message.success('提交成功')
                this.$refs.amendSub.style.display = 'none'
                if (this.identity[0].identity === '管理专家') {
                  this.getReport()
                } else {
                  this.getReportTwo()
                }
              } else {
                Message.error(res.data.msg)
              }
            })
          } else {
            Message.warning('图片上传中')
          }
        }
      },
      glModifierSub() { // 管理专家修改诊断提交按钮
        let number = this.formModelDiagnosis.number
        let opinion = this.formModelDiagnosis.opinion
        let filePathArr = this.filePathArr
        let filePath = ''
        if (this.filePathArr.length) {
          this.filePathArr.forEach(e => {
            filePath += e + ','
          })
          filePath = filePath.substr(0, filePath.length - 1)
        }
        this.fileUrl = filePath
        if ((number === '' || number === undefined || number === null) || (opinion === '' || opinion === undefined || opinion === null) || (filePathArr === '' || filePathArr === undefined || filePathArr === null)) {
          Message.warning('数据不能为空')
        } else {
          if (this.filePath && this.fileName) {
            this.axios.request({
              method: 'GET',
              url: '/camel/rest/telemedicine/reports/addglzjReport',
              params: {
                fid: this.formModelDiagnosis.fid,
                number: this.formModelDiagnosis.number,
                picture: this.fileUrl,
                opinion: this.formModelDiagnosis.opinion,
                expertId: this.identity[0].id,
                hospital: this.identity[0].hospitalId,
                id: this.formModelDiagnosis.id
              }
            }).then((res) => {
              if (res.data.success === true) {
                Message.success('修改成功')
                this.$refs.amendSub.style.display = 'none'
                this.axios.request({
                  method: 'GET',
                  url: '/camel/rest/telemedicine/reports/changeReport',
                  params: {
                    id: this.formModelDiagnosis.id
                  }
                }).then((res) => {
                  if (this.identity[0].identity === '管理专家') {
                    this.getReport()
                  } else {
                    this.getReportTwo()
                  }
                })
              } else {
                Message.error(res.data.msg)
              }
            })
          } else {
            Message.warning('图片上传中')
          }
        }
      },
      modifierSub() { // 专家修改诊断提交
        let number = this.formModelDiagnosis.number
        let opinion = this.formModelDiagnosis.opinion
        let filePathArr = this.filePathArr
        let filePath = ''
        if (this.filePathArr.length) {
          this.filePathArr.forEach(e => {
            filePath += e + ','
          })
          filePath = filePath.substr(0, filePath.length - 1)
        }
        this.fileUrl = filePath
        if ((number === '' || number === undefined || number === null) || (opinion === '' || opinion === undefined || opinion === null) || (filePathArr === '' || filePathArr === undefined || filePathArr === null)) {
          Message.warning('数据不能为空')
        } else {
          if (this.filePath && this.fileName) {
            this.axios.request({
              method: 'GET',
              url: '/camel/rest/telemedicine/reports/addReport',
              params: {
                fid: this.formModelDiagnosis.fid,
                number: this.formModelDiagnosis.number,
                picture: this.fileUrl,
                opinion: this.formModelDiagnosis.opinion,
                expertId: this.identity[0].id,
                hospital: this.identity[0].hospitalId
              }
            }).then((res) => {
              if (res.data.success === true) {
                Message.success('修改成功')
                this.$refs.amendSub.style.display = 'none'
                this.axios.request({
                  method: 'GET',
                  url: '/camel/rest/telemedicine/reports/changeReport',
                  params: {
                    id: this.formModelDiagnosis.id
                  }
                }).then((res) => {
                  if (this.identity[0].identity === '管理专家') {
                    this.getReport()
                  } else {
                    this.getReportTwo()
                  }
                })
              } else {
                Message.error(res.data.msg)
              }
            })
          } else {
            Message.warning('图片上传中')
          }
        }
      },
      modifier() { // 修改诊断身份判断和显示隐藏
        console.log('this.formModelDiagnosis+++++++++', this.formModelDiagnosis)
        if (this.identity[0].identity === '管理专家') {
          this.$refs.amendSub.style.display = 'block'
          this.$refs.amend.style.display = 'none'
          this.groupMark = false
          this.groupOpin = false
          this.fileArr = []
          this.filePathArr = []
        } else {
          if (this.formModelDiagnosis.judge === null || this.formModelDiagnosis.status === '未打印') {
            this.$refs.amendSub.style.display = 'block'
            this.$refs.amend.style.display = 'none'
            this.groupMark = false
            this.groupOpin = false
            this.fileArr = []
            this.filePathArr = []
          } else {
            if (this.formModelDiagnosis.status === '未打印') {
              Message.warning('已提交过修改，请勿重复提交')
            } else {
              Message.warning('已打印，禁止修改会诊')
            }
          }
        }
      },
      getReport() { // 管理专家表格获取数据
        this.axios.request({
          method: 'GET',
          // url: '/camel/rest/telemedicine/reports/getReportQ',
          url: '/camel/rest/telemedicine/reports/getReportG',
          params: {
            expertId: this.identity[0].id,
            hospital: this.identity[0].hospitalId,
            num: this.currentPage
          }
        }).then((res) => {
          this.tableData = res.data.data
          this.total = res.data.totalCount * 10
          this.tableData.forEach((res) => {
            if (res.sex === '1') {
              res.sex = '男'
            } else {
              res.sex = '女'
            }
          })
          if (this.tableData[0].picture) {
            this.fileArr = this.tableData[0].picture.split(',')
          }
          this.formModel = this.tableData[0]
          this.formModelDiagnosis = this.formModel
          this.formModelDiagnosis.expertName = this.identity[0].name
          let fileArr = this.fileArr
          if ((fileArr === '' || fileArr === undefined || fileArr === null || fileArr.length < 1)) {
            this.groupMark = false
            this.groupOpin = false
            this.$refs.amend.style.display = 'block'
            this.$refs.modDiag.style.display = 'none'
            this.$refs.amendSub.style.display = 'none'
          } else {
            this.groupMark = true
            this.groupOpin = true
            this.$refs.amend.style.display = 'none'
            this.$refs.modDiag.style.display = 'block'
          }
        })
      },
      getReportTwo() { // 专家表格获取数据
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/reports/getReportQ',
          params: {
            expertId: this.identity[0].id,
            hospital: this.identity[0].hospitalId,
            num: this.currentPage
          }
        }).then((res) => {
          this.tableData = res.data.data
          this.total = res.data.totalCount * 10
          this.tableData.forEach((res) => {
            if (res.sex === '1') {
              res.sex = '男'
            } else {
              res.sex = '女'
            }
          })
          if (this.tableData[0].picture) {
            this.fileArr = this.tableData[0].picture.split(',')
          }
          this.formModel = this.tableData[0]
          this.formModelDiagnosis = this.formModel
          this.formModelDiagnosis.expertName = this.identity[0].name
          let fileArr = this.fileArr
          console.log('fileArr', fileArr)
          if ((fileArr === '' || fileArr === undefined || fileArr === null || fileArr.length < 1)) {
            this.groupMark = false
            this.groupOpin = false
            this.$refs.amend.style.display = 'block'
            this.$refs.modDiag.style.display = 'none'
            this.$refs.amendSub.style.display = 'none'
          } else {
            this.groupMark = true
            this.groupOpin = true
            this.$refs.amend.style.display = 'none'
            this.$refs.modDiag.style.display = 'block'
          }
        })
      },
      getDetails(row) { // 点击表格显示患者详细信息
        this.formModel = {}
        this.formModelDiagnosis = {}
        this.fileArr = []
        this.formModel = JSON.parse(JSON.stringify(row))
        this.formModelDiagnosis = JSON.parse(JSON.stringify(row))
        if (row.picture) {
          this.fileArr = row.picture.split(',')
        }
        this.$refs.amendSub.style.display = 'none'
        this.formModelDiagnosis.expertName = this.identity[0].name
        let number = this.formModelDiagnosis.number
        let opinion = this.formModelDiagnosis.opinion
        let fileArr = this.fileArr
        if ((number === '' || number === undefined || number === null) && (opinion === '' || opinion === undefined || opinion === null) && (fileArr === '' || fileArr === undefined || fileArr === null || fileArr.length < 1)) {
          this.groupMark = false
          this.groupOpin = false
          this.$refs.amend.style.display = 'block'
          this.$refs.modDiag.style.display = 'none'
          this.$refs.amendSub.style.display = 'none'
        } else {
          this.groupMark = true
          this.groupOpin = true
          this.$refs.amend.style.display = 'none'
          this.$refs.modDiag.style.display = 'block'
        }
      },
      // 切换当前页
      handleCurrentChange(val) {
        console.log('当前页:', val)
        this.currentPage = val
        if (this.identity[0].identity === '管理专家') {
          this.getReport()
        } else {
          this.getReportTwo()
        }
      },
      // 点击按钮跳转开播页面
      toAnchor(index, row) {
        console.log('当前行:', index, row)
        let newPage = this.$router.resolve({
          path: '/live/anchor',
          name: 'anchor',
          query: {userId: 'public', patientId: row.id}
        })
        window.open(newPage.href, '_blank')
      }
    }
  }
</script>

<style scoped lang="stylus">
  .header
    padding 0

  .nav-layout
    position relative
    height 100%

  .main-live
    margin-left 27px
    padding 0

  .main-live .main-content-box
    padding-right 27px
    margin-top 28px
    overflow-y auto
    overflow-x hidden

  .main-live .main-content-box .main-content-title
    color #a2c8f8
    font-size 14px

  .main-live .main-content-box .el-card
    margin-top: 25px

  // 会诊诊断-翻页样式
  .pagination-box
    text-align center

  .el-button--mini
    vertical-align middle
    margin-top 15px

  .el-pagination
    display inline-block
    margin-top 15px
    vertical-align middle
    padding 0 5px

  .w-33
    width 33.33333333%
    float left

  .w-50
    width 50%
    float left

  .el-form-item
    margin-bottom 14px

  .card-record
    float right
    margin-top -7px

  .card-modification
    background-color #fff
    color #6bbbf9
    border 1px solid #6bbbf9
    border-radius 18px
    display inline-block
    height 34px
    line-height 34px
    text-align center
    cursor pointer
    padding 0 10px
    vertical-align top
    font-size 14px

  .saveData
    background-color #fff
    color #6bbbf9
    border 1px solid #6bbbf9
    border-radius 18px
    height 34px
    line-height 34px
    text-align center
    cursor pointer
    padding 0 10px
    vertical-align top
    font-size 14px
    margin 20px auto
    width 78px

  .card-title
    font-size 16px

  .dingwei
    position relative
    height 30px

  .paging
    position absolute
    left 50%
    bottom -10px
    transform translateX(-50%)

  .clearfix
    zoom 1

  .clearfix:after
    clear both
    display block
    visibility hidden
    height 0
    line-height 0
    content ''

  .el-main
    padding 0 20px

  .card-title
    font-size 16px

  .textMessage-information
    color #999
    height 28px
    line-height 28px
    font-size 14px

  .textMessage-information .carveUp
    margin 0 5px

  .el-pagination
    margin-top 20px
    text-align center

  .popularUl li
    font-size 14px
    color #676767
    line-height 61px
    height 61px
    white-space nowrap
    padding 0 30px

  .popularUl li:nth-child(even)
    background-color #f2f2f2

  .discSpan
    width 8px
    height 8px
    float left
    background-color #b7b8ba
    border-radius 50%
    margin 26px 20px 26px 0

  .popularTitle
    float left
    width 90%
    overflow hidden
    text-overflow ellipsis
    cursor pointer

  .popularTitle:hover
    color #1572e9

  .blueBtn
    float right
    line-height 28px
    padding 0 16px
    border-radius 17px
    margin-top -5px
    border-color #6bbbfa
    color #6bbbfa

  .blueBtn:hover
    background-color #6bbbfa
    color #fff

  .forumTxtSelect
    margin-bottom 18px
    width 100%

  .forumTxtInput
    margin-bottom 18px

  .form-card
    overflow-y auto

  .amendSubmit
    display none

  .imgHeight
    height 150px
    overflow-x auto
    img
      margin 10px
</style>
<style lang="stylus">
  .main-live .main-content-box .el-table--fit
    overflow-y scroll
</style>
